<template>
  <div
    class="w-[350px] border border-gray-200 bg-white p-3 shadow-md rounded-lg"
    @click="openDrawer"
  >
    <Handle type="target" :position="Position.Left" />
    <div class="flex flex-col gap-y-1">
      <common-title-module />
    </div>
    <div
      v-for="(item, index) in data.selectlist"
      :key="index"
      class="flex items-center justify-between mb-2"
      style="font-size: 12px"
    >
      <p class="w-1/6 text-right node-sub-text">
        {{ index == 0 ? '如果' : '否则如果' }}
      </p>
      <div
        class="w-5/6 p-1 ml-2 border border-gray-300 border-solid rounded-md border-1"
      >
        <div v-for="(condition, cIndex) in item.publicjson" :key="index+''+cIndex">
          <div class="flex items-center justify-between">
            <div class="flex-1 p-1 mr-2 font-semibold rounded-md bg-slate-100">
              {{ getSelectName(condition.varname) }}
            </div>
            <div
              :title="OPERATOR_VALUES[condition.vartype][condition.condition]?.name"
            >
              {{ OPERATOR_VALUES[condition.vartype][condition.condition]?.mark }}
            </div>
            <div class="flex-1 p-1 ml-2 font-semibold rounded-md bg-slate-100">
              {{ condition.varparam }}
            </div>
          </div>
          <div class="logic" v-if="cIndex != item.publicjson.length - 1">
            {{ LOGIC_VALUES[item.andor] }}
          </div>
        </div>
      </div>
      <Handle
        :id="'source-' + index"
        type="source"
        :position="Position.Right"
        style="top: auto; translate: 50% 0%"
      />
    </div>
    <div class="flex items-center justify-between">
      <p class="w-1/6 text-right node-sub-text">否则</p>
      <div
        class="w-5/6 ml-2 border border-gray-300 border-solid rounded-md h-9 border-1"
      ></div>
      <Handle
        :id="'source-' + data.selectlist.length"
        type="source"
        :position="Position.Right"
        style="top: auto; translate: 50% 0%"
      />
    </div>
  </div>
  <ConditionDrawerModule
    ref="drawerRef"
    :title="node?.node?.label"
    :form="data"
    :source-options="sourceOptions"
    @cancel="onCancel"
  />
</template>
<script setup>
import { ref, computed } from 'vue';
import { Handle, Position, useNode } from '@vue-flow/core';
import { editNode } from '@/api/modules/flow';
import { useVueFlow } from '@vue-flow/core';
import { OPERATOR_VALUES, LOGIC_VALUES, SOURCE_OPTIONS } from '../../lib/constant';
import CommonTitleModule from '../modules/common-title-module.vue';
import ConditionDrawerModule from '../modules/condition-drawer-module.vue';
defineProps();

const node = useNode();
const data = ref({
  selectlist: node.node?.data?.selectlist || [
  {
    andor: '',
    publicjson: [
      {
        varname: '',
        vartype: 'String',
        varparam: '',
        condition: 0,
      },
    ],
  },
]
});

const getSelectName = (data) => {
  return SOURCE_OPTIONS.find(item => item.value == data)?.label
}

const { findNode, edges } = useVueFlow()
const sourceOptions = ref([]);
const getSourceOptions = () => {
  const temp = [];
  edges.value.forEach(target => {
    if (target.target == node.id) {
      const {data} = findNode(target.source)
      const outputList = data.nodecode == ('startcode'||'inputcode') ? data.inoutlist : data.outputjsonlist;
      temp.push({
        label: data.nodename,
        outputList: outputList
      })
    }
  })

  sourceOptions.value = temp;
}
const drawerRef = ref(null);
const openDrawer = () => {
  getSourceOptions();
  drawerRef.value?.init();
};

const onCancel = async() => {
  await editNode({data: { id: node.id, ...data.value}})
}
</script>
